<template>
  <div>
    <div id="infoBar" style="width:1200px;height:500px;"></div>
    <div id="container" style="width:600px;height:400px;"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
const echarts = require('echarts');
export default {
props: [],
computed: {
...mapGetters({
  cate_Arr:"cate/cate_Arr"
})
},
data() {
  return{

  }
},
mounted() {
  this.set_cateArr({istree:true});


},
watch:{
  cate_Arr:{
    handler(){
      // 侦听到数据变化,进行图表绘制
    let odiv = document.getElementById('container');
    let mychat = echarts.init(odiv);

    let option = {
          title: {
            text: "分类数据"
          },
          //series ：数据
          series: [
            {
              name: "子类数量",
              type: "pie", // 设置图表类型为饼图
              radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              data:this.cate_Arr.map(item=>({value:item.children?item.children.length:0,name:item.catename}))
              
              /* [
                //list=[{catename:"家用电器"，children::Array(4)},{catename:"美妆护肤"，children:Array(9)},{catename:"运动健身"，children::Array(3)},{catename:"母婴产品"}]

                { value: 4, name: "家用电器" },
                { value: 9, name: "美妆护肤" },
              ]*/
            }
          ]
        };

        mychat.setOption(option);


        // 根据图片绘制固定页面图表
        let chat2 = echarts.init(document.getElementById('infoBar'));

        let option2 = {
          color:['red'],
          title: {
            text: "近一周订单数量"
          },
          tooltip: {},
          legend: {
            data: ["近一周订单数量"]
          },
          xAxis: {
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {},
          //series ：数据
          series: [
            {
              name: "近一周订单数量",
              type: "line",
              data: [260,270,110,490,400,700,810]
            }
          ]
        };

        chat2.setOption(option2);
    },
    deep:true,
  }
},
methods: {
...mapActions({
  set_cateArr:'cate/set_cateArr'
})
}
};
</script>

<style scoped lang="less">

</style>